<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>about内容区</title>
    <link rel="stylesheet" href="style.css"/><!---->
    <link rel="stylesheet" href="slider.css"/><!--路边摊-->
    <link rel="stylesheet" href="css/about.css"/><!--about内容区css-->
    <link rel="stylesheet" href="css/about2.css"/><!--about2左边区css-->
    <link rel="stylesheet" href="css/about3.css"/><!--about3左边区css-->
    <link rel="stylesheet" href="css/footer.css"/><!--页脚css-->
    <!--一定要记住每一次设计新区样式，要加入css表格啊啊啊！！！-->
    <script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<!--导航区开始-->
   <header id="header">
    <div class="center">
        <h1 class="logo">logo标题</h1>
        <nav class="link">
            <h1 class="none">网站导航</h1>
            <ul class="wuxu"> <!---->
                <li class="active"><a href="index.html">首页</a>
                  <ul id="xu">
                      <li><a href="book.html">二级</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <!--第二个ul-->
            <ul class="wuxu">
                <li class="active"><a href="book.html">菜单</a>
                  <ul id="xu">
                      <li><a href="index.html">可爱</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <!--第3个ul-->
            <ul class="wuxu">
                <li class="active"><a href="about.html">关于</a>
                  <ul id="xu">
                      <li><a href="#">二级</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <!--第4个ul-->
            <ul class="wuxu">
                <li class="active"><a href="book.html">轮播图</a>
                  <ul id="xu">
                      <li><a href="#">二级</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <!--第5个ul-->
            <ul class="wuxu">
                <li class="active"><a href="#">花朵</a>
                  <ul id="xu">
                      <li><a href="#">二级</a></li>
                      <li><a href="about.html">二级</a></li>
                  </ul>
                </li>
            </ul>
            <button class="button">搜索</button><!--搜索框-->
        </nav>
    </div>    
</header>

<!--导航区结束-->

<!--轮播图设计-->
<div id="slider">
    <ul class="slieder-item-container" id="ull"><!---->
        <li class="current"><a href="#"><img class="one" src="images/1.jpg" /></a></li>
        <li class="current"><a href="#"><img class="one" src="images/2.jpg" /></a></li>
        <li class="current"><a href="#"><img class="one" src="images/3.jpg" /></a></li>
        <li class="current"><a href="#"><img class="one" src="images/4.jpg" /></a></li>
        <li class="current"><a href="#"><img class="one" src="images/5.jpg" /></a></li>
    </ul>
    <div class="arrow-container"><!--左右按钮-->
        <span class="left-arrow"><</span>
        <span class="right-arrow">></span>
    </div>
    <div class="indicator-container"><!--圆点设置-->
        <span class="indicator active"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
    </div>
</div>
<!--轮播图结束-->

<!--------about大内容区开始-------->
<div id="container">

<!-----右边区域内容结束------->

    <!---右about1----->
    <aside class="sidebar">

        <!--1号表格开始-->
        <div class="sidebox">
            <h2>何柳慧推荐</h2>
            <div class="tag">
                <ul>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                    <li><a href="#">曼谷(12)</a></li>
                </ul>
            </div>
        </div>
        <!--1号表格结束-->

        <!--2号表格开始-->
        <div class="hot">
            <h2>旅人绿森林</h2>
            <div class="figure">
                
                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>

                <figure class="fig1">
                    <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                    <figcaption>曼谷-芭提雅6日游</figcaption>
                </figure>
            </div>

        </div>
        <!--2号表格结束-->

        <!--3号表格开始-->
        <div class="sidebox">
            <h2>旅游百宝箱</h2>
            <div class="box">
                <a href="###" class="trea1">天气预报</a>
                <a href="###" class="trea2">火车票查询</a>
                <a href="###" class="trea3">航空查询</a>
                <a href="###" class="trea4">地铁线路查询</a>
            </div>
        </div>
        <!--3号表格结束-->
    </aside>
    <!--右about1=----->

<!-----右边区域内容结束------->
    


<!--左边区域内容开始-->

<!------左about2第1排开始-------->
    <div class="list">
        <div class="infor">
            <ul class="left">
                <li><a href="###">限时特价</a></li>
                <li><a href="###">热门推荐</a></li>
            </ul>
            <ul class="right">
                <li><a href="###" class="selected">推荐</a></li>
                <li><a href="###">折扣</a></li>
                <li><a href="###">价格</a></li>
            </ul>
        </div>
         <!--左标题div结束-->

         <!--左内容表单内容开始-->
         <figure class="tour"><!--借用了tour的css样式表-->
               <img src="./img/tour3.jpg" alt="何柳慧完成下拉菜单和轮播图">
               <figcaption>
                   <article>
                    <header>
                        <hgroup>
                            <h2>曼谷-芭提雅6日游</h2>
                            <h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人劵...</h3>
                        </hgroup>
                    </header>

                    <ol>
                        <li><mark>交通</mark>春秋航空,桂林出发,无须转机</li>
                        <li><mark>团期</mark>11/01、11/03、11/08...</li>
                    </ol>

                    <div class="buy">
                        <div class="price">￥<strong>2864</strong><s>￥3980</s></div>
                        <div class="reserve"><a href="###">立即抢购</a></div>
                    </div>
                
                    <div class="type">国内长线</div>
                    <div class="disc"><span>4.7折</span></div>
                    <footer>本团游由桂林旅行社赞助提供，截止于<time>2019-04-10</time></footer>

                   </article>
               </figcaption>

               
         </figure>
         <!--左内容表单内容结束-->
         <div class="more">加载更多...</div><!--按钮-->
          
    </div>
<!------左about2第1排结束-------->


 <!------左about3第2排开始-------->
    <div class="sst">
        <dl>
            <dt class="le1"><img src="./img/le1.jpg"></dt>
            <dd class="le2"><a href="#">开心每一天,淡泊以明志，宁静以致远</a></dd>
            <dt class="le3"><img src="img/le3.jpg"></dt>
            <dd class="le4"><a href="#">开心每一天,淡泊以明志，宁静以致远,淡泊以明志，宁静以致远</a></dd>
        </dl>

        <dl>
            <dt class="c1"><img src="./img/le1.jpg"></dt>
            <dd class="c2"><a href="#">开心每一天,淡泊以明志，宁静以致远</a></dd>
            <dt class="c3"><img src="img/le3.jpg"></dt>
            <dd class="c4"><a href="#">开心每一天,淡泊以明志，宁静以致远,淡泊以明志，宁静以致远</a></dd>
        </dl>
    </div>
 <!------左about3第2排开始-------->


<!--左边区域内容结束-->

</div>

<!---------about大内容区结束------>




<!--页脚区开始-->
<footer id="footer">

     <div class="fo1">
        <div class="block left">
            <h2>何柳慧@__@</h2>
            <hr>
            <ul>
                <li>途牛旅游网</li>
                <li>驴妈妈旅游网</li>
                <li>携程旅游</li>
                <li>中国青年旅行社</li>
            </ul>
        </div>
        <div class="block center">
            <h2>何柳慧@__@</h2>
            <hr>
            <ul>
                <li>旅游合同签订有哪些？</li>
                <li>儿童票有半价优惠吗？</li>
            </ul>
        </div>
        <div class="block right">
            <h2>何柳慧@__@</h2>
            <hr>
            <ul>
                <li>微博: weibo.com/zzz</li>
                <li>邮件: lpz2@163.com</li>
                <li>地址: 广西桂林</li>
            </ul>
        </div>
    </div>
     </div>

     <div class="fo2">Copyright © 18300206|网络工程1802班级|何柳慧：何柳慧</div>
</footer>
<!--页脚区结束-->


</body>
</html>